<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>创建节点</title>
    <style type="text/css">
      div, span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
      }

      div.mini {
        width: 30px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
      }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(function () {
        // 添加重庆li到 上海下(使用dom的传统方法)
        $("#b1").click(
                function () {
                  //1.创建重庆li
                  var cq_li = document.createElement("li");
                  //2.设置属性和内容
                  cq_li.setAttribute("id", "cq");
                  cq_li.setAttribute("name", "chongqing");
                  cq_li.innerText = "重庆";
                  //3.添加到上海下
                  var element = document.getElementById("sh");
                  element.append(cq_li);
                }
        )

        // 添加重庆li到 上海下
        $("#b2").click(
                function () {
                  //1.获取上海li
                  var $sh = $("#sh");
                  //2.创建重庆li
                  var $cq = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");
                  //3.将重庆插入到上海下(外部插入)
                  $sh.after($cq);
                }
        )

        // 添加成都li到 北京前
        $("#b3").click(
                function () {
                  //1.获取北京li
                  var $bj = $("#bj");
                  //2.创建成都li
                  var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>")
                  //3.添加成都li到 北京前
                  $bj.before($cd);
                }
        )

        //添加成都li到 北京和上海之间
        $("#b4").click(
                function () {
                  //1.获取北京li
                  var $bj = $("#bj");
                  //2.获取上海li
                  var $sh = $("#sh");
                  //2.创建成都li
                  var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>")
                  //3.添加成都li到 北京前
                  $bj.after($cd);
                  $(sh).before($cd);
                }
        )

      })

    </script>
  </head>
  <body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="jl" name="jilin">吉林</li>
    <li id="my" name="mianyang">绵阳</li>
  </ul>

  <input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
  <input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
  <input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
  <input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
  </body>
</html>